import React from 'react'

import { Spin, Alert, Pagination } from 'antd';

// 导入电影展示项目
import MovieItem from './MovieItem.jsx'

import styles from '../../css/movie_list.scss'

export default class MovieList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: [], // 电影列表
      movieType: props.match.params.type,
      nowPage: parseInt(props.match.params.page) || 1, // 当前展示页码
      pageSize: 16, // 每页显示数据条数
      total: 0, // 当前电影分类下总数据条数
      isLoading: true // 数据是否正在加载
    }
  }

  render() {
    return <div>
      {this.renderList()}
    </div>
  }

  pageChange = (page) => {
    this.props.history.push('/movie/' + this.state.movieType + '/' + page)
    this.setState({
      nowPage: page,
      isLoading: true
    })
    // 手动使用BOM对象实现跳转，最好使用react-router-dom路由方法进行编程式导航
    // window.location.href = '/#/movie/' + this.state.movieType + '/' + page
    
    this.loadMovieListByTypeAndPage()
  }

  renderList = () => {
    if (this.state.isLoading) {
      return <Spin tip="Loading...">
      <Alert
        message="资源正在加载中。。。"
        description="精彩内容，马上呈现！"
        type="info"
      />
    </Spin>
    } else {
      return <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'space-around'}}>
        <div className={styles.movieList}>
        {
        // console.log(this.state.movies)
        this.state.movies.map((item,index) => {
          return <MovieItem {...item} key={index} history={this.props.history}></MovieItem>
         })
        }
        </div>
        <Pagination style={{margin: 'auto'}} defaultCurrent={this.state.nowPage} total={this.state.total} showSizeChanger={false} pageSize={this.state.pageSize} onChange={this.pageChange}/>
      </div>
    }
  }

  // 根据电源类型和页码获取数据
  loadMovieListByTypeAndPage = () => {
    // const start = this.state.pageSize * (this.state.nowPage - 1)
    // 列表查询
    // const url = `https://movie.douban.com/j/new_search_subjects/?start=${start}`
    // 详情内容查询
    // const url = 'https://movie.querydata.org/api?id=1302425'

    // fetch(url,{
    //   method: 'GET',
    //   mode: 'cors'
    // })
    // .then(response => {
    //   return response.json()
    // }, err => console.log(err))
    // .then(data => {
    //   this.setState({
    //     isLoading: false,
    //     movie: data.subjects,
    //     total: data.total
    //   })
    //   console.log(data)
    // })

    setTimeout(() => {
      const data = require(`../../test_data/${this.state.movieType}.json`)
      const start = (this.state.nowPage-1)*this.state.pageSize
      const end = start + this.state.pageSize

      const showData = data["data"].slice(start, end)
      this.setState({
        isLoading: false,
        movies: showData,
        total: data["data"].length
      })
    }, 100)
  }

  // 每当地址栏变化时，重置state中的参数项，重置完毕后请求数据
  UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      movieType: nextProps.match.params.type,
      isLoading: true,
      nowPage: parseInt(nextProps.match.params.page) || 1
    }, () => {this.loadMovieListByTypeAndPage()})
  }

  componentDidMount() {
    this.loadMovieListByTypeAndPage()
  }
}